<template>
  <div class="app-container">
    <div
      v-show="
        !modifyInfo.visible && !detailInfo.visible && !detailListInfo.visible
      "
    >
      <!-- 条件栏 -->
      <NewPageFilter
        v-model:query="filterInfo.query"
        :filter-list="filterInfo.serchList"
        :filter-btn="filterInfo.searchBtn"
      ></NewPageFilter>
      <div class="filter-wrapper">
        <NewPageFilter :filter-btn="filterInfo.btnList">
          <template v-slot:filter-deleteBatch>
            <el-button @click="deleteRow" :disabled="!canDel">删除</el-button>
          </template>
        </NewPageFilter>

        <div>
          <el-button
            @click="checkChangBtn(1)"
            :class="state.isActive === 1 ? '' : 'notActiveBtn'"
            >产品条码</el-button
          >
          <el-button
            @click="checkChangBtn(3)"
            :class="state.isActive === 3 ? '' : 'notActiveBtn'"
            >产品码</el-button
          >
          <el-button
            @click="checkChangBtn(2)"
            :class="state.isActive === 2 ? '' : 'notActiveBtn'"
            >资产条码</el-button
          >
          <el-button
            @click="checkChangBtn(4)"
            :class="state.isActive === 4 ? '' : 'notActiveBtn'"
            >财务资产条码</el-button
          >
          <el-button
            @click="checkChangBtn(5)"
            :class="state.isActive === 5 ? '' : 'notActiveBtn'"
            >货位编号</el-button
          >
        </div>
      </div>

      <!-- 表格 -->
      <TableContainer
        :refresh="tableInfo.refresh"
        :init-curpage="tableInfo.initCurpage"
        v-model:data="tableInfo.data"
        :api="tableInfo.api"
        :query="filterInfo.query"
        :field-list="tableInfo.fieldList"
        :handle="tableInfo.handle"
        @handleEvent="handleEvent"
      >
        <template v-slot:col-name="scope">
          <span class="slip-edit" @click="showDetail(scope.row)">{{
            scope.row.name
          }}</span>
        </template>

        <template v-slot:col-updateTime="scope">
          <span>{{
            scope.row.updateTime === undefined
              ? '-'
              : scope.row.updateTime.substring(0, 10)
          }}</span>
        </template>
      </TableContainer>
    </div>
    <insert
      v-if="modifyInfo.visible"
      v-model:visible="modifyInfo.visible"
      :title="modifyInfo.title"
      :type="state.methodType"
      :isActive="state.isActive"
      :tableRow="state.tableRow"
      @returnModify="returnModify"
    ></insert>
    <detail
      v-if="detailInfo.visible"
      :isActive="state.isActive"
      v-model:visible="detailInfo.visible"
      :qrCodeId="detailInfo.qrCodeId"
      @returnBack="getList"
    />
  </div>
</template>

<script setup name="baseQrCodeRule">
import TableContainer from '@/components/TableContainer/index'
import insert from './insert.vue'
import { getQrCodeRule, setDefault, deleteQrCodeRuleBatch } from '@/api/base.js'
import detail from './detail.vue'

const { proxy } = getCurrentInstance()

const state = reactive({
  getQrCodeRule,
  setDefault,
  deleteQrCodeRuleBatch,
  methodType: '',
  addAndUpdateDialog: false,
  tableRow: {},
  dialogTitle: '',
  isActive: 1,
})
const filterInfo = reactive({
  query: {
    sort: 'is_default desc,create_time desc',
    orgId:
      'system_admin' !== proxy.$store.state.user.userInfo.user.type
        ? proxy.$store.state.user.userInfo.user.orgId
        : '',
    userId: proxy.$store.state.user.userInfo.user.id,
    qrType: 1,
  },
  serchList: [
    {
      componentType: 'input',
      label: '名称',
      value: 'search',
      event: search,
    },
  ],
  searchBtn: [{ type: 'button', label: '搜索', event: search }],
  btnList: [
    { type: 'button', label: '新增', event: addCodeRule },
    { type: 'slot', value: 'deleteBatch' },
    { type: 'slot', value: 'changeBtn' },
  ],
})
const modifyInfo = reactive({
  visible: false,
  title: '',
  purchOrderId: '',
})
// 表格相关
const tableInfo = reactive({
  refresh: 1,
  initCurpage: 1,
  data: [],
  api: undefined,
  selections: [],
  fieldList: [
    { label: '名称', value: 'name', type: 'slot' },
    { label: '条码类型', value: 'qrTypeValue' },
    { label: '最近更新人', value: 'updateUserName' },
    { label: '更新时间', value: 'updateTime', type: 'slot' },
    { label: '是否默认', value: 'isDefaultValue' },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '100',
    btList: [
      {
        label: '设为默认',
        event: updateDefault,
        show: true,
        popconfirmText: '将此规则设为默认,是否继续？',
        ifRender: function (row) {
          return row.isDefault === 0
        },
      },
      { label: '修改', event: update, show: true },
      {
        label: '删除',
        event: deleteRow,
        show: true,
        popconfirmText: '删除后将改变数据,是否继续？',
        ifRender: function (row) {
          return row.isDefault === 0
        },
      },
    ],
  },
})
//明细相关
const detailInfo = reactive({
  visible: false,
  qrCodeId: '',
})
const detailListInfo = reactive({
  visible: false,
})

const canDel = computed(() => {
  return (
    tableInfo.selections.length &&
    !tableInfo.selections.filter((item) => item.isDefault !== 0).length
  )
})
onMounted(() => {
  getList()
})

function checkChangBtn(str) {
  state.isActive = str
  filterInfo.query.qrType = str
  tableInfo.refresh = Math.random()
}
function update(row) {
  // 编辑
  state.methodType = 'edit'
  modifyInfo.visible = true
  modifyInfo.title = '修改规则'
  // 显示信息
  // modifyInfo.purchOrderId = row.id
  state.tableRow = { ...row }
}
function addCodeRule() {
  state.methodType = 'add'
  modifyInfo.visible = true
  modifyInfo.title = '新增规则'
  state.tableRow = {}
}
function returnModify() {
  if (state.tableRow && state.tableRow.id) {
    getList()
  } else {
    search()
  }
}
// 获取列表
function getList() {
  tableInfo.api = state.getQrCodeRule
  tableInfo.refresh = Math.random()
}
// 搜索
function search() {
  // 重置分页
  tableInfo.initCurpage = Math.random()
  tableInfo.refresh = Math.random()
}
function updateDefault(row) {
  const params = {
    id: row.id,
    updateUser: proxy.$store.state.user.userInfo.user.id,
    orgId: proxy.$store.state.user.userInfo.user.orgId,
    qrType: state.isActive,
  }
  state.setDefault(params).then((resp) => {
    if (resp && resp.success) {
      search()
    }
  })
}
function deleteRow(row = undefined) {
  if (row && row.id) {
    deleteBatch([row.id])
  } else {
    proxy
      .$confirm('删除后将改变数据,是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      })
      .then(() => {
        let ids = tableInfo.selections.map((item) => item.id)
        deleteBatch(ids)
      })
  }
}
function deleteBatch(ids) {
  state.deleteQrCodeRuleBatch(ids).then((resp) => {
    if (resp && resp.success) {
      search()
    }
  })
}

//展示明细
function showDetail(row) {
  detailInfo.qrCodeId = row.id
  detailInfo.visible = true
}
// 触发事件
function handleEvent(event, data) {
  switch (event) {
    case 'tableCheck':
      tableInfo.selections = [...data]
      break
  }
}
</script>

<style lang="scss">
.changBtn {
  float: right;
}
.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.filter-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
